<template>
  <div class="main">
    <div>
        <el-button icon="el-icon-plus" type="primary">新增</el-button>
        <el-button icon="el-icon-upload" type="success" @click="dialogVisible=true">批量新增</el-button>
    </div>
    <div v-if="dataList.length<=0">
        <el-empty description="抱歉，没有数据哦"></el-empty>
    </div>
    <el-table
      :data="dataList"
      max-height="500"
      v-else
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        fixed
        width="100">
      </el-table-column>
      <el-table-column
        prop="username"
        label="账号/学号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="address"
        width="220"
        label="地址">
      </el-table-column>
      <el-table-column
        width="200"
        label="创建时间">
        <template slot-scope="scope">
            <div>{{ getDate(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="school"
        width="200"
        label="学校">
      </el-table-column>
      <el-table-column
        prop="department"
        width="200"
        label="院系">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
            <el-tag :type="scope.row.isDelete===0?'success':'danger'">{{ scope.row.isDelete===0?'正常':'禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="270"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-circle-close" @click="disable(scope.row.id)">
              {{ scope.row.isDelete===0?'禁用':'解禁' }}
            </el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row.id)">删除</el-button>
            <el-button type="primary" icon="el-icon-edit-outline">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <UserListExcelVue :dialogVisible="dialogVisible" @close="close"></UserListExcelVue>
  </div>
</template>

<script>
import common from '@/util/common';
import UserListExcelVue from './UserListExcel.vue';
import request from '@/util/request';

export default {
    data(){
        return{
            dialogVisible:false
        }
    },
    props:{
        dataList:{
            type:Array,
            required:true,
            default:()=>[]
        }
    },
    
    methods:{
        getDate(date){
            console.log(date);
            
            return common.formatDate(date)
        },
        close(){
            this.$emit('refresh')
            this.dialogVisible = false
        },
        disable(id){
          request.get(`/admin/user/disable?id=${id}`).then((res) => {
              this.$notify.success('操作成功')
              this.$emit('refresh')
          })
          .catch(err =>{
            if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
             }                  )
        },
        deleteUser(id){
          request.get(`/admin/user/delete?id=${id}`).then((res) => {
              this.$notify.success('操作成功')
              this.$emit('refresh')
          })
          .catch(err =>{
            if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
             })
        }
    },
    components:{UserListExcelVue}
}
</script>

<style lang="scss" scoped>
.main{
    padding: 10px;
    width: 100%;
}
</style>